<template>
    <div class="createPage">
        <Row>
            <Col span="24">
                <Form ref="createRef" :model="createForm" :rules="createRule" :label-width=120>
                    <div class="createPage-box">
                        <h2 class="createPage-title">商城信息</h2>
                        <Col span="12">
                            <Form-item label="商城名称" prop="shopName">
                                <Input placeholder="请输入商城名称" :maxlength=20 v-model="createForm.shopName" style="width:400px"/>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="商城标题" prop="shopTitle">
                                <Input placeholder="请输入商城标题" :maxlength=20 v-model="createForm.shopTitle" style="width:400px"/>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="商城关键词" prop="shopKeyword">
                                <Input placeholder="商城关键词,用空格隔开，如“关键词1” “关键词2”" :maxlength=50 v-model="createForm.shopKeyword" style="width:400px"/>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="商城LOGO" prop="url">
                                <Upload action="" :before-upload="beforeUploadImg" >
                                    <i-button icon="ios-cloud-upload-outline" class="chooseBtn">选择上传文件</i-button>
                                    <span>只能上传jpg/png/jpeg文件，且不超过5M</span>
                                </Upload>
                                <div class="demo-upload-list">
                                    <img v-if="createForm.url" :src="createForm.url" alt="" style="width: 100px;height: 100px;">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(createForm.url, 'img')"></Icon>
                                    </div>
                                </div>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="客服热线" prop="customerServiceTel">
                                <Input placeholder="请输入客服热线" :maxlength=50 v-model="createForm.customerServiceTel" style="width:400px"/>
                            </Form-item>
                            <Form-item label="客服邮箱" prop="customerServiceEmail">
                                <Input placeholder="请输入客服邮箱" :maxlength=50 v-model="createForm.customerServiceEmail" style="width:400px"/>
                            </Form-item>
                        </Col>
                    </div>
                </Form>
            </Col>
            <Col span="24" class="ta-c">
                <Button type="primary" @click="submitCreate('createRef')">提交</Button>
                <Button @click="closeCreate">取消</Button>
            </Col>
        </Row>
        <Spin size="large" fix v-show="showSpin">
            请稍后....
        </Spin>
    </div>
</template>
<script>
export default {
    name: 'createPage',
    data(){
        return{
            shopId: -1,
            showSpin: false,
            // 表单
            createForm:{
                shopLogo: '', // logo
                url: '', // logo链接
                shopName: '', // 商城名称
                shopTitle: '', // 商城标题
                shopKeyword: '', // 商城关键词
                customerServiceTel: '', // 客服热线
                customerServiceEmail: '', // 客服邮箱
            },
            // 表单验证
            createRule:{
                shopName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                    {pattern: /^[\u4e00-\u9fa5a-zA-Z\d,\.，。]+$/, message: '只能输入 中文，英文，数字，逗号句号', trigger: 'blur'}
                ], // 产品名称
                shopTitle: [
                    {message: '商城标题', trigger: 'blur' },
                    {pattern: /^[\u4e00-\u9fa5a-zA-Z\d,\.，。]*$/, message: '标题输入仅限中英文及数字', trigger: 'blur'}
                ], // 商城标题
                shopKeyword: [
                    {message: '商城关键词,用空格隔开，如“关键词1” “关键词2”', trigger: 'blur' },
                    {pattern: /^[\u4e00-\u9fa5A-Za-z0-9 \s，。？/ @ # ￥ % …… & - = + （ ） ( ) ^ ！!]*$/, message: '标题输入仅限中英文及数字', trigger: 'blur'}
                ], // 商城关键词
                url: [
                    { required: true, message: '请上传商城logo', trigger: 'blur' }
                ],
                customerServiceTel: [
                    {required: true, message: '请输入客服热线', trigger: 'change'},
                    {type: 'string', pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}|1[34578]\d{9}$/, message: '客服热线格式输入有误,座机号请带区号，如027-88888888', trigger: 'blur'}
                ], // 客服热线
                customerServiceEmail: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},
                    {type: 'email', pattern: /^[0-9A-Za-z][\.-_0-9A-Za-z]*@[0-9A-Za-z]+(?:\.[0-9A-Za-z]+)+$/, message: '请输入正确邮箱格式，xx@xx.xx或xx-xx@xx.xx', trigger: 'blur'}
                ] // 客服邮箱

            }
        }
    },
    mounted (){
    //    this.defaultShop()
    },
    methods: {
        // 进入页面查询默认商铺
        // defaultShop () {
        //     depot.get({
        //         url: this.URL.EC_SELLER.FIND_DEFAULT_SHOP,
        //         cb: (data) => {
        //             // this.showSpin = false;
        //             if(data.code === 0) {
        //                 this.createForm = data.data;
        //                 console.log(data.data.id, 'data.data')
        //                 // this.createForm.url = data.data.shopUrl
        //             }
        //         }
        //     })
        // },
        // 图片上传
        beforeUploadImg (file) {
            console.log(file, '123')
            this.beforeUpload(file, 'img');
        },
        beforeUpload (file, type) {
            let vue = this;
            if(type === 'img') {
                if (!/image\/\w+/.test(file.type)) {
                    vue.$Message.error('请确保文件为图像类型');
                    return;
                }
            }
            if (file.size > 5242880) {
                vue.$Message.error('文件不能大于5M,请重新上传');
                return false;
            }
            if (file) {
                let reader = new FileReader();
                reader.onloadend = function () {
                    /* this从vue实例变为reader */
                    let submitData = new FormData();
                    submitData.append('file', file);
                    // let vue = this;
                    depot.post({
                        url: vue.URL.DOCUMENT.UPLOAD_DOCUMENT,
                        data: submitData,
                        cb: (data) => {
                            console.log(data.data,111)
                            if (data.code === 0) {
                                vue.$Message.success('图片上传成功');
                                if (type === 'img') {
                                    vue.createForm.url = data.data.accessUrl;
                                    vue.createForm.shopLogo = data.data.id;
                                    console.log(data.data,111)
                                }
                            } else {
                                vue.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                        }
                    });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
        },
        // 删除上传的图片
        handleRemove (file, index) {
            console.log(file.length, 'this.$refs.upload')
            // const fileList = this.$refs.upload.fileList;
            this.createForm.url = ""
             this.createForm.shopLogo = ""
        },
        // 取消创建商城
        closeCreate(){
            this.$refs['createRef'].resetFields();
            console.log(this.createForm, '取消创建商城')
        },
        // 提交创建商城表单
        submitCreate(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    console.log(this.createForm, '提交创建 商城表单')
                    // 进入页面查询商铺是否存在
                    this.createForm.isBOSSAdd = false;
                    this.createForm.isDefault = false;
                    this.showSpin = true;
                    depot.post({
                                url: this.URL.EC_SELLER.SHOP_SAVE,
                                data: this.createForm,
                                cb: (data) => {
                                    if(data.code === 0) {
                                        this.$Message.success('创建商城成功');
                                        this.showSpin = false;
                                        this.$refs['createRef'].resetFields();
                                    }else{
                                        this.$Message.error(data.Message);
                                        this.showSpin = false;
                                    }
                                },
                                ce: (error) => {
                                    this.$Message.error(data.Message);
                                },
                            })
                }
            })

        }
    }
}
</script>
<style lang="less" scoped>
.createPage{
    min-width: 1000px;
    .chooseBtn{
        width: 100px;
    }
    .createPage-box{
        .createPage-title{
            padding: 20px 0;
        }
    }
    .demo-upload-list{
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff; 
        font-size: 95px;
        cursor: pointer;
        margin: 0 2px;
    }

}
</style>


